<template>
  <div class="bar-chart bg-c-base">
    <div class="title-wrapper">
      <div class="left">
        <div class="title">当前热卖品类</div>
        <div class="sub-title">Hot Categories</div>
      </div>
      <div class="right">
        <div class="sub-title">最后更新时间：{{ date }} {{ time }}</div>
      </div>
    </div>
    <div id="average-age-chart3">
      <v-chart :options="options" ref="chart"></v-chart>
    </div>
  </div>
</template>

<script>
import { reactive, watch, onMounted, getCurrentInstance } from 'vue';
import { clock as useClock } from '@/hooks';
import mock from '@/hooks/mock';
export default {
	name : 'barChart',
	setup () {
		const { time, date } = useClock();
		let { barChart } = reactive(mock());
		let options = reactive({
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow',
				},
			},
			color : ['rgb(209,248,138)'],
			grid : {
				left : 20,
				right : 0,
				bottom : 30,
				top : 20,
			},
			yAxis : {
				type : 'value',
				splitLine : {
					lineStyle : {
						type : 'dotted',
					},
				},
				axisLine : {
					onZero : false,
					lineStyle : {
						color : '#fff',
					},
				},
				axisLabel : {
					color : '#fff',
					fontSize : 16,
				},
				axisTick : { show : false },
			},
			xAxis : {
				type : 'category',
				data : [],
				splitLine : { show : false },
				axisTick : { show : false },
				axisLabel : {
					color : '#fff',
					fontSize : 16,
				},
				axisLine : {
					onZero : false,
					lineStyle : {
						color : '#fff',
					},
				},
			},
			series : [
				{
					type : 'bar',
					data : [],
					barWidth : 40,
					showBackground : true,
					backgroundStyle : {
						color : 'rgba(180, 180, 180, 0.2)',
					},
				},
			],
		});

		let update = () => {
			options.xAxis.data = barChart.name;
			options.series[0].data = barChart.data;
		};
		update();
		onMounted(() => {
			let dom = getCurrentInstance().ctx.$refs['chart'];
			watch(
				() => barChart.data,
				() => {
					update();
					dom.init();
				}
			);
		});

		return {
			time,
			date,
			options,
		};
	},
};
</script>

<style lang="scss" scoped>
.bar-chart {
  margin-top: 20px;
  height: 400px;
  padding: 20px 40px;
  box-sizing: border-box;

  .title-wrapper {
    display: flex;

    .right {
      flex: 1;
      text-align: right;
    }

    .title {
      font-size: 32px;
    }

    .sub-title {
      font-size: 16px;
      margin-top: 10px;
    }
  }
  #average-age-chart3 {
    height: 250px;
  }
}
</style>
